<template>
  <div class="contact">
      <h1><span class="el-icon-phone-outline"></span>  咨询电话：400-157-0588</h1>
      <p>天沁财富承诺保护您的个人信息不外泄</p>
      <div class="inputbox">
          <img src="http://img3.tqcaifu.com/img/user.png" alt="姓名">
          <input type="text" v-model="name" placeholder="请输入您的姓名">
      </div>
      <div class="inputbox">
          <img src="http://img3.tqcaifu.com/img/phone.png" alt="手机号">
           <input type="text" v-model="phone" placeholder="请输入您的手机号">
      </div>
     
      <div class="submit" @click="subcontactus">立即提交</div>
      <p>立即联系您的理财顾问</p>
  </div>
</template>
<script>
import api from '../static/js/api.js';
export default {
      data() {
        return {
          name:"",
          phone:""
        }
      },
      methods:{
          subcontactus(){
            if(this.name == ""){
                this.$alert("请填写您的姓名！");
                return;
            }else if(!/^1\d{10}$/.test(this.phone)){
                this.$alert("请正确填写您手机号！");    
                return;                
            }else{
                  api.contactUs({phone:this.phone,name:this.name}).then((res)=>{
                            if(res.code == 1){
                                this.name = "";
                                this.phone = "";
                                
                              this.$alert(res.msg)
                            }else{
                              this.$alert(res.msg)
                            }
              })
          }
      }
  }
}
</script>

<style scoped>
.contact{
    background: white;
    height: 313px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 0 10px #ccc;
}
.contact h1{
    margin-top: 30px;
    font-weight: bolder;
    font-size: 24px;
    color: #b41d24;
    text-align: center;
}
.contact p{
    font-size: 14px;
    color: #999;
    text-align: center;
    margin: 20px auto;
}
.inputbox {
    width: 190px;
    margin: 10px auto;
    border: 1px solid #ccc; 
    padding: 4px 10px;
}
.inputbox  input{
    height: 30px;
    width: 160px;
    display: inline-block;
    padding-left: 10px;
    border: none;
    outline:none;
    vertical-align: middle;
}
.inputbox img{
    vertical-align: middle;
    
}

.submit{
    height: 40px;
    width: 200px;
    text-align: center;
    line-height: 40px;
    margin: 20px auto;
    background: #b41d24;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    box-shadow:  2px 2px 6px #ccc;
}
</style>
